<template>
    <div class="table-page">
        <div class="table-operation-box">
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickAdd('单个添加')"
            >单个添加
            </el-button>
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-plus"
                @click="clickBatchAdd('批量添加')"
            >批量添加
            </el-button>
            <el-button
                type="primary"
                style="margin-bottom: 2em"
                icon="el-icon-arrow-right"
                @click="locationAll('位置列表')"
            >位置列表
            </el-button>
        </div>

        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
            >
                <el-table-column
                    prop="longitude"
                    label="经度"
                ></el-table-column>
                <el-table-column
                    prop="latitude"
                    label="纬度"
                ></el-table-column>
                <el-table-column
                    prop="remark"
                    label="备注"
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                    label="操作"
                    min-width="200"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-edit"
                            :loading="scope.row.opLoading"
                            @click="
                                clickSimpleEdit(scope.row, '修改机构位置')
                            "
                        >编辑
                        </el-button>
                        <el-button
                            v-if="!scope.row.edit"
                            lass="primary"
                            type="text"
                            size="mini"
                            icon="el-icon-delete"
                            :loading="scope.row.opLoading"
                            @click="
                                tableDelete(
                                    '/user/sys/group/location/delete',
                                    {
                                        id: scope.row.id
                                    },
                                    true
                                )
                            "
                        >删除
                        </el-button>

                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :title="dialogFormTitle"
            :visible.sync="dialogFormVisible"
            :before-close="dialogClose"
            :modal="false"
            custom-class="two-dialog"

        >
            <el-form
                ref="dataForm"
                :model="dataForm"
                label-width="8em"
                :rules="dataFormRule"

            >
                <el-form-item label="经度" prop="longitude">
                    <el-input v-model="dataForm.longitude"></el-input>
                </el-form-item>
                <el-form-item label="纬度" prop="latitude">
                    <el-input v-model="dataForm.latitude"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="dataForm.remark" type="textarea" rows="5"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="dialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="formDataSave('/user/sys/group/location/update')"
                >保 存</el-button
                >
            </span>
        </el-dialog>
        <el-dialog
            :title="batchDialogFormTitle"
            :visible.sync="batchDialogFormVisible"
            :before-close="batchDialogClose"
            :modal="false"
            custom-class="two-dialog"

        >
            <el-form
                ref="batchDataForm"
                :model="batchDataForm"
                label-width="8em"
                :rules="batchDataFormRule"

            >
                <el-form-item label="添加经纬度" prop="locationStr">
                    <el-input v-model="batchDataForm.locationStr" placeholder="106.505995-29.621798" type="textarea" rows="5"></el-input>
                    <el-button type="primary" style="margin-left: 10px" @click="locationCheck">确定</el-button>
                </el-form-item>
                <el-form-item label="经纬度集合" prop="locationList">
                    <el-button
                        v-for="(item, index) in batchDataForm.locationList"
                        :key="index"
                        type="primary"
                        plain
                        icon="el-icon-delete"
                        style="margin-left: 10px"
                        @click="removeIp(index)"
                    >{{ item }}
                    </el-button>
                    <!--                    <el-input disabled v-model="batchDataForm.ipList.join(',')" type="textarea" ></el-input>-->
                </el-form-item>

                <el-form-item label="备注" prop="remark">
                    <el-input v-model="batchDataForm.remark" type="textarea" rows="5"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button :loading="submitFlag" @click="batchDialogClose"
                >取 消</el-button
                >
                <el-button
                    :loading="submitFlag"
                    type="primary"
                    @click="batchDataFormSave"
                >保 存</el-button
                >
            </span>
        </el-dialog>

        <el-dialog :title="locationAllDialogFormTitle"
                   :visible.sync="locationAllVisible"
                   width="80%"
                   :before-close="locationAllClose"
                   :modal="false">
            <div class="el-dialog-div">
                <group-location-all-component
                    v-if="locationAllVisible"
                >
                </group-location-all-component>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {checkGroupBatchLocationExist, checkGroupLocationExist} from "@/api/user";
import groupLocationAllComponent from "@/views/models/vrs/group/groupLocationAll";
import {post} from "@/api/request";
import {checkLong, checkLat} from "@/utils/validate";

export default {
    name: "GroupLocation",
    components: {groupLocationAllComponent},
    mixins: [TablePage],
    props: {
        groupId: {
            type: Number,
            default: null
        }
    },
    data() {
        return {
            queryData: {
                groupId: this.groupId,
                code: "",
                enable: null
            },
            initAddForm: {
                longitude: null,
                latitude: null,
                remark: null,
                groupId: this.groupId,
            },
            dataFormRule: {
                longitude: [
                    {
                        required: true,
                        message: "请输入经度",
                        trigger: "blur"
                    },
                    {
                        validator : (rule,value,callback) =>{
                            if (value){
                                if (checkLong(value)){
                                    callback();
                                }else {
                                    callback(new Error("经度整数部分为0-180,小数部分为0到6位!"))
                                }
                            }
                        },
                        trigger: "blur"
                    }

                ],
                latitude: [
                    {
                        required: true,
                        message: "请输入纬度",
                        trigger: "blur"
                    },
                    {
                        validator : (rule,value,callback) =>{
                            if (value){
                                if (checkLat(value)){
                                    callback();
                                }else {
                                    callback(new Error("纬度整数部分为0-90,小数部分为0到6位!"))
                                }
                            }
                        },
                        trigger: "blur"
                    }

                ],
            },
            batchDialogFormTitle: null,
            batchDialogFormVisible: false,
            batchInitDataForm: {
                groupId: this.groupId,
                locationStr: null,
                locationList: [],
                remark: null,
            },
            batchDataForm: {
                locationStr: null,
                locationList: [],
                remark: null,
            },
            batchDataFormRule: {
                locationList: [
                    {
                        required: true,
                        message: "经纬度不能为空",
                        trigger: "blur"
                    },

                ],
            },
            locationAllVisible:false,
            locationAllDialogFormTitle:null,
        };
    },
    computed: {
        ...mapState({})
    },
    watch: {},
    created() {
    },
    mounted() {
    },
    methods: {
        search(queryData) {
            this.loadTable("/user/sys/group/location/page", queryData, true,);
        },
        removeIp(index) {
            this.batchDataForm.locationList.splice(index, 1);
        },
        locationAll(title){
            this.locationAllVisible = true;
            this.locationAllDialogFormTitle = title;
        },
        locationAllClose(){
            this.locationAllVisible = false;
            this.search()
        },
        clickBatchAdd(title) {
            this.batchInitDataForm.locationList=[]
            this.batchDataForm = {
                ...this.batchInitDataForm,
                addAction: true
            };
            this.batchDialogFormVisible = true;
            this.batchDialogFormTitle = title;
        },
        batchDialogClose() {
            this.batchDataForm = {};
            this.batchDialogFormVisible = false;
        },
        batchDataFormSave() {
            this.$refs.batchDataForm.validate(valid => {
                if (valid) {
                    this.submitFlag = true;
                    post("/user/sys/group/location/batchAdd", this.batchDataForm)
                        .then(() => {
                            this.batchDialogFormVisible = false;
                            this.search();
                        })
                        .finally(() => {
                            this.submitFlag = false;
                        })
                } else {
                    j();
                }
            });
        },
        locationCheck() {
            if (!this.batchDataForm.locationStr) {
                this.$confirm("请输入经纬度");
                return
            }

            checkGroupBatchLocationExist({locationStr: this.batchDataForm.locationStr}).then(res => {
                if (res && res.success && res.success.length>0){
                    res.success.forEach( ip =>{
                        let split = ip.split("-");
                        if(checkLong(split[0]) && checkLat(split[1]) ){
                            if (!this.batchDataForm.locationList.includes(ip)) {
                                this.batchDataForm.locationList.push(ip);
                            }
                        }else {
                            res.fail.push(ip);
                        }
                    })
                }
                if (res && res.fail && res.fail.length>0){
                    this.$confirm("经纬度格式不对或已存在:"+res.fail);
                }

            })

        },

    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
